/* Global responsive utilities for MenuDigital
   - Focus: mobile-first adaptivity, tablet-friendly layouts
   - Non-invasive: only styling and layout rules, no JS or functional changes
*/

:root{
  --max-width-xs: 420px;
  --max-width-sm: 768px;
  --max-width-md: 992px;
  --content-padding: 12px;
  --border-radius: 10px;
}

html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  margin:0;
  padding:0;
}

/* Ensure media elements are fluid */
img, video, iframe { max-width:100%; height:auto; display:block; }
/* Make inputs and selects use full width on small screens */
input[type="text"], input[type="date"], input[type="number"], textarea, select { width:100%; box-sizing:border-box; }

/* Buttons: stack on small screens to improve tap targets */
.pedido-actions { gap:8px; }
@media (max-width: 600px) {
  .pedido-actions { flex-direction: column; }
  .pedido-actions button { width:100%; box-sizing:border-box; }
}

/* Global container behavior */
.container { width:100%; padding-left:var(--content-padding); padding-right:var(--content-padding); margin-left:auto; margin-right:auto; }
@media (min-width: 576px) { .container { max-width:540px; } }
@media (min-width: 768px) { .container { max-width:720px; } }
@media (min-width: 992px) { .container { max-width:960px; } }

/* Make cards more compact on small screens */
.pedido-card { padding:12px; border-radius:var(--border-radius); }

/* Sidebar responsive overrides (non-invasive) */
@media (max-width: 991px) {
  .sidebar { position: fixed !important; left: -260px !important; top:0; height:100vh; z-index:1200; width:260px !important; transition: left .22s ease; }
  .sidebar.active { left: 0 !important; }
  #content { padding-left: 12px !important; padding-right: 12px !important; }
  /* Provide an overlay when sidebar is open */
  body.sidebar-open::after{ content: ''; position: fixed; inset:0; background: rgba(0,0,0,0.35); z-index:1100; }
}

/* Make footer elements wrap well */
.store-footer .row { gap: 12px; }

/* Tables: horizontal scroll on small screens */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Modals: ensure they never exceed viewport on mobile */
.modal-content { max-width: 94vw; margin: 12px; }

/* Utility: clickable full-width items for small screens */
@media (max-width: 480px) {
  .btn { display:block; width:100%; }
  .navbar .btn { display:inline-block; width:auto; }
}

/* Improve readability: slightly reduce line-length on very small screens */
@media (max-width: 420px) {
  body { font-size:15px; }
}

/* Make input groups and selects more touch-friendly */
.filter-form input, .filter-form select { padding:10px; font-size:1rem; }

/* Small helpers */
.text-truncate-2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }

/* Small spacing for pedido-card instances used in multiple templates */
.pedido-card { margin-bottom: 12px; }

/* Preserve existing layout behaviors but provide stacking fallback */
@media (max-width: 768px) {
  .pedido-header { flex-direction: column; align-items:flex-start; gap:6px; }
}

/* POS-specific responsive tweaks */
@media (max-width: 900px) {
  /* Stack the POS into a single column; right panel becomes part of document flow */
  .pos-container { grid-template-columns: 1fr !important; height: auto !important; padding: 12px !important; }
  .left-panel { margin-right: 0 !important; }
  .right-panel { position: relative !important; width: 100% !important; height: auto !important; top: 0 !important; right: 0 !important; padding: 12px !important; }
  #cart-items { margin: 0; padding: 0; max-height: none; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  /* On medium screens allow a smaller right panel to improve usable area */
  :root { --pos-right-width: 360px; }
  .pos-container { grid-template-columns: 1fr var(--pos-right-width) !important; }
}